<template>
  <div class="bg-gray-50 min-h-screen">
    <el-header class="bg-white shadow-md">
      <div class="container mx-auto px-4 py-6">
        <h1 class="dashboard-title">宠物商店数据分析</h1>
      </div>
    </el-header>

    <el-main class="container mx-auto px-4 py-8">
      <!-- 使用ElementUI栅格系统实现一行两列布局 -->
      <el-row :gutter="20">
        <!-- 第一行 -->
        <el-col :span="12">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="clearfix">
                <span><i class="fa fa-line-chart text-blue-500 mr-2"></i>每日收入统计</span>
              </div>
            </template>
            <div class="h-64">
              <div ref="revenueChartRef" style="height: 250px;"></div>
            </div>
            <div class="mt-4 grid grid-cols-3 gap-2 text-sm">
              <div class="text-center p-2 rounded bg-blue-50">
                <span class="block font-medium text-blue-600">会员充值</span>
                <span class="block font-bold text-gray-800">{{ formatCurrency(revenueData.membership) }}</span>
              </div>
              <div class="text-center p-2 rounded bg-green-50">
                <span class="block font-medium text-green-600">商品销售</span>
                <span class="block font-bold text-gray-800">{{ formatCurrency(revenueData.product) }}</span>
              </div>
              <div class="text-center p-2 rounded bg-purple-50">
                <span class="block font-medium text-purple-600">服务消费</span>
                <span class="block font-bold text-gray-800">{{ formatCurrency(revenueData.service) }}</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="clearfix">
                <span><i class="fa fa-users text-orange-500 mr-2"></i>会员统计</span>
              </div>
            </template>
            <div class="h-64">
              <div ref="memberChartRef" style="height: 250px;"></div>
            </div>
            <div class="mt-4 grid grid-cols-3 gap-2 text-sm">
              <div class="text-center p-2 rounded bg-orange-50">
                <span class="block font-medium text-orange-600">金卡会员</span>
                <span class="block font-bold text-gray-800">{{ memberData.gold }}</span>
              </div>
              <div class="text-center p-2 rounded bg-gray-50">
                <span class="block font-medium text-gray-600">银卡会员</span>
                <span class="block font-bold text-gray-800">{{ memberData.silver }}</span>
              </div>
              <div class="text-center p-2 rounded bg-yellow-50">
                <span class="block font-medium text-yellow-600">普通会员</span>
                <span class="block font-bold text-gray-800">{{ memberData.normal }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="mt-6">
        <!-- 第二行 -->
        <el-col :span="12">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="clearfix">
                <span><i class="fa fa-cubes text-teal-500 mr-2"></i>库存统计</span>
              </div>
            </template>
            <div class="h-64">
              <div ref="inventoryChartRef" style="height: 250px;"></div>
            </div>
            <div class="mt-4 grid grid-cols-2 gap-2 text-sm">
              <div class="text-center p-2 rounded bg-teal-50">
                <span class="block font-medium text-teal-600">猫粮</span>
                <span class="block font-bold text-gray-800">{{ inventoryData.catFood }}</span>
              </div>
              <div class="text-center p-2 rounded bg-red-50">
                <span class="block font-medium text-red-600">狗粮</span>
                <span class="block font-bold text-gray-800">{{ inventoryData.dogFood }}</span>
              </div>
              <div class="text-center p-2 rounded bg-indigo-50">
                <span class="block font-medium text-indigo-600">玩具</span>
                <span class="block font-bold text-gray-800">{{ inventoryData.toys }}</span>
              </div>
              <div class="text-center p-2 rounded bg-pink-50">
                <span class="block font-medium text-pink-600">用品</span>
                <span class="block font-bold text-gray-800">{{ inventoryData.supplies }}</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="clearfix">
                <span><i class="fa fa-paw text-amber-500 mr-2"></i>宠物种类统计</span>
              </div>
            </template>
            <div class="h-64">
              <div ref="petChartRef" style="height: 250px;"></div>
            </div>
            <div class="mt-4 grid grid-cols-3 gap-2 text-sm">
              <div class="text-center p-2 rounded bg-amber-50">
                <span class="block font-medium text-amber-600">金毛</span>
                <span class="block font-bold text-gray-800">{{ petData.goldenRetriever }}</span>
              </div>
              <div class="text-center p-2 rounded bg-emerald-50">
                <span class="block font-medium text-emerald-600">拉布拉多</span>
                <span class="block font-bold text-gray-800">{{ petData.labrador }}</span>
              </div>
              <div class="text-center p-2 rounded bg-cyan-50">
                <span class="block font-medium text-cyan-600">泰迪</span>
                <span class="block font-bold text-gray-800">{{ petData.teddy }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-footer class="bg-white border-t border-gray-200 mt-12">
      <div class="container mx-auto px-4 py-8">
        <p class="text-center text-gray-500 text-sm">© 2025 宠物商店数据分析系统 | ElementUI布局</p>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';

// 数据
const revenueData = { membership: 12500, product: 8300, service: 5200 };
const memberData = { gold: 156, silver: 324, normal: 587 };
const inventoryData = { catFood: 245, dogFood: 189, toys: 320, supplies: 215 };
const petData = { goldenRetriever: 89, labrador: 124, teddy: 97 };

const totalRevenue = revenueData.membership + revenueData.product + revenueData.service;
const totalMembers = memberData.gold + memberData.silver + memberData.normal;
const totalInventory = inventoryData.catFood + inventoryData.dogFood + inventoryData.toys + inventoryData.supplies;
const totalPets = petData.goldenRetriever + petData.labrador + petData.teddy;

// 容器ref
const revenueChartRef = ref(null);
const memberChartRef = ref(null);
const inventoryChartRef = ref(null);
const petChartRef = ref(null);

const formatCurrency = (value) => '¥' + value.toLocaleString();
const calculatePercentage = (value, total) => Math.round((value / total) * 100);

onMounted(async () => {
  await nextTick();

  // 收入统计 - 环形图
  const revenueChart = echarts.init(revenueChartRef.value);
  revenueChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        const percentage = calculatePercentage(params.value, totalRevenue);
        return `${params.name}: ${formatCurrency(params.value)} (${percentage}%)`;
      }
    },
    legend: { bottom: 0 },
    series: [{
      name: '收入统计',
      type: 'pie',
      radius: ['60%', '80%'],
      avoidLabelOverlap: false,
      label: { show: false },
      emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
      data: [
        { value: revenueData.membership, name: '会员充值' },
        { value: revenueData.product, name: '商品销售' },
        { value: revenueData.service, name: '服务消费' }
      ],
      color: ['#a4c7ff', '#c4ffb4', '#d7c5ff']
    }]
  });

  // 会员统计 - 饼图
  const memberChart = echarts.init(memberChartRef.value);
  memberChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        const percentage = calculatePercentage(params.value, totalMembers);
        return `${params.name}: ${params.value}人 (${percentage}%)`;
      }
    },
    legend: { bottom: 0 },
    series: [{
      name: '会员统计',
      type: 'pie',
      radius: '70%',
      data: [
        { value: memberData.gold, name: '金卡会员' },
        { value: memberData.silver, name: '银卡会员' },
        { value: memberData.normal, name: '普通会员' }
      ],
      color: ['#f9d316', '#9fa6ad', '#d9e89f']
    }]
  });

  // 库存统计 - 极坐标图
  const inventoryChart = echarts.init(inventoryChartRef.value);
  inventoryChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        const percentage = calculatePercentage(params.value, totalInventory);
        return `${params.name}: ${params.value}件 (${percentage}%)`;
      }
    },
    angleAxis: { type: 'category', data: ['猫粮', '狗粮', '玩具', '用品'] },
    radiusAxis: {},
    polar: {},
    series: [{
      type: 'bar',
      data: [
        inventoryData.catFood,
        inventoryData.dogFood,
        inventoryData.toys,
        inventoryData.supplies
      ],
      coordinateSystem: 'polar',
      name: '库存',
      colorBy: 'data',
      itemStyle: {
        color: (params) => ['#c6fff5', '#da7e7e', '#ffbeb0', '#8ca2f1'][params.dataIndex]
      }
    }],
    legend: { show: false }
  });

  // 宠物统计 - 饼图
  const petChart = echarts.init(petChartRef.value);
  petChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        const percentage = calculatePercentage(params.value, totalPets);
        return `${params.name}: ${params.value}只 (${percentage}%)`;
      }
    },
    legend: { bottom: 0 },
    series: [{
      name: '宠物统计',
      type: 'pie',
      radius: '70%',
      data: [
        { value: petData.goldenRetriever, name: '金毛' },
        { value: petData.labrador, name: '拉布拉多' },
        { value: petData.teddy, name: '泰迪' }
      ],
      color: ['#eac27e', '#a8f6dc', '#ffbbe8']
    }]
  });
});
</script>

<style>
@tailwind utilities;

body {
  font-family: 'Inter', sans-serif;
}

/* 卡片样式 */
.box-card {
  height: 100%;
}

/* 图表容器样式 */
canvas {
  max-height: 250px;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .el-col {
    width: 100%;
    margin-bottom: 1rem;
  }

  .h-64 {
    height: 40vh;
  }
}

/* ElementUI徽章样式适配（虽然已删除徽章，保留防止后续复用） */
.el-badge__content {
  font-size: 12px;
  font-weight: 500;
  height: 20px;
  line-height: 20px;
  padding: 0 7px;
}
.dashboard-title {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  margin-bottom: 24px;
}
</style>
